<template>
    <div class="user-card">
        <div class="user-line" v-if="is_login">
            <div class="avatar">{{ username[0]?.toUpperCase() }}</div>
            <div class="user-info">
                <div class="user-name">{{ username }}</div>
                <div class="user-email">{{ userInfo.account }}</div>
            </div>
        </div>
        <div class="asset-line" v-if="is_login">
            <div class="value-box" @click="routerTo('/user/fund_account')">
                <div class="left-box">
                    <div class="k">Fund Account</div>
                    <div class="v">${{ userInfo.balance || '0.00' }}</div>
                </div>
                <div class="right-box"></div>
            </div>
            <div class="value-box" @click="routerTo('/user/stock_account')">
                <div class="left-box">
                    <div class="k">Stocks Account</div>
                    <div class="v">${{ userInfo.balance || '0.00' }}</div>
                </div>
                <div class="right-box"></div>
            </div>
        </div>
        <div class="asset-line" v-if="is_login">
            <div class="value-box">
                <div class="left-box">
                    <div class="k">Spot Account</div>
                    <div class="v">$0.00</div>
                </div>
                <div class="right-box"></div>
            </div>
            <div class="value-box">
                <div class="left-box">
                    <div class="k">Contracts Account</div>
                    <div class="v">$0.00</div>
                </div>
                <div class="right-box"></div>
            </div>
        </div>
        <div class="unlogin-box" v-if="!is_login">
            <div class="icon" style="--icon: url(/icon/toast/prompt.svg)"></div>
            <div class="text">Please Sign In</div>
            <div class="login-btn" @click="routerTo('/login')">Sign In</div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

import { userInfo } from '@/service/user.js';
import { totle_value } from '@/service/asset.js';
import { is_login } from '@/service/auth.js';
import { routerTo } from '@/utils/jump';

const username = computed(() => {
    let email = userInfo.account;
    let name = email.split('@')[0];
    return name;
});
</script>

<style scoped lang="less">
.user-card {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;
    border-radius: 3vw;
    background-color: #fff;
    box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 3vw;

    .user-line {
        display: flex;
        align-items: center;
        gap: 3vw;

        .avatar {
            --size: 12vw;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background-color: var(--active-light-color);
            color: var(--active-color);
            font-size: 5vw;
            font-weight: 700;
            line-height: var(--size);
            text-align: center;
        }

        .user-info {
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .user-name {
                font-size: 5vw;
                // font-size: 3.5vw;
                font-weight: 700;
            }

            .user-email {
                font-size: 3vw;
                // font-size: 2.5vw;
                font-weight: 500;
                color: var(--text-light-color);
            }
        }
    }

    .asset-line {
        display: flex;
        align-items: center;
        gap: 3vw;

        .value-box {
            box-sizing: border-box;
            flex: 1;
            height: 15vw;
            display: flex;
            justify-content: space-between;
            padding: 1vw 7vw;
            background-color: var(--bg-color);
            border-radius: 2vw;
            
            .left-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .k {
                    font-size: 3vw;
                }

                .v {
                    font-size: 3.5vw;
                    font-weight: 700;
                }
            }

            .right-box {
                width: 2vw;
                height: 100%;
                position: relative;

                &::before, &::after {
                    content: '';
                    display: block;
                    --size: 20vw;
                    --border-width: 4vw;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                }
                
                &::before {
                    width: var(--size);
                    height: var(--size);
                    border-top: var(--border-width) solid var(--text-color);
                    border-right: var(--border-width) solid var(--text-color);
                    transform: translate(-50%, -50%) rotate(45deg) scale(0.1);
                }
    
                &::after {
                    width: calc(var(--size) * 1.414);
                    height: var(--border-width);
                    background-color: var(--text-color);
                    transform: translate(-50%, -50%) scale(0.1);
                }
            }
        }
    }

    .unlogin-box {
        width: 100%;
        height: 30vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3vw;

        .icon {
            --size: 8vw;
            --w: var(--size);
            --h: var(--size);
        }

        .text {
            font-size: 5vw;
            font-weight: 500;
        }

        .login-btn {
            width: 30vw;
            height: 8vw;
            background-color: var(--active-color);
            border-radius: 8vw;
            text-align: center;
            line-height: 8vw;
            color: #fff;
            font-size: 3vw;
        }
    }
}
</style>